<template>
  <el-date-picker ref="main" class="l-time custom-data-range" :format="myformat" :valueFormat="myformat"
    :placeholder="placeholder" :startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder"
    :readonly="readonly" :disabled="disabled" :editable="editable" :clearable="clearable" :size="size" :type="dateType"
    :align="align" :rangeSeparator="rangeSeparator" :defaultValue="defaultValue" :unlink-panels="unlinkPanels"
    v-model="value2">
  </el-date-picker>

</template>
<script>
export default {
  name: 'l-date-range',
  props: {
    value: {},
    placeholder: String,
    startPlaceholder: {
      type: String,
      default: '请选择'
    },
    endPlaceholder: {
      type: String,
      default: '请选择'
    },
    readonly: Boolean,
    disabled: Boolean,
    editable: Boolean,

    clearable: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'mini'
    },
    dateType: {
      type: String,
      default: 'date'
    },
    align: String,
    rangeSeparator: {
      type: String,
      default: '-'
    },
    defaultValue: Date,



    format: String,

    selectableRange: [String, Array],

    unlinkPanels: {
      type: Boolean,
      default: true
    },


  },
  created() {
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  computed: {
    value2: {
      get() {
        if (this.isRange) {
          if (this.$validatenull(this.value)) {
            return ["", ""];
          }
          else {
            return this.value.split(` , `);
          }
        }
        else {
          if (this.$validatenull(this.value)) {
            return this.value
          }
          return this.value.replace('T', ' ');
        }
      },
      set(newValue) {
        if (this.isRange) {
          if (this.$validatenull(newValue)) {
            this.$emit('input', '');
          }
          else {
            this.$emit('input', `${newValue[0]} , ${newValue[1]}`);
          }

        }
        else {
          this.$emit('input', this.$formatDate(newValue, "yyyy-MM-dd HH:mm:ss"));
        }

        this.$emit('change', newValue);
      }
    },
    myformat() {
      let format = ''
      switch (this.dateType) {
        case 'datetime':
          format = 'yyyy-MM-dd HH:mm:ss'
          break
        case 'datetimerange':
          format = 'yyyy-MM-dd HH:mm'
          break
        case 'daterange':
          format = 'yyyy-MM-dd'
          break
        case 'monthrange':
          format = 'yyyy-MM'
          break
      }
      return this.format || format

    },
    isRange() {
      return ['datetimerange', 'daterange', 'monthrange'].includes(this.dateType)
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
.custom-data-range {
  padding-top: 3px !important;
}
</style>
